uniapp 多个input框输入完成后自动跳转下一个，删除内容后回退到上一个

2024-05-30 10:58| 来源: 网络整理| 查看: 265

项目是用于精准输入号码去做匹配的，在uniapp里多个input框输入完成后自动跳转下一个，删除内容后回退到上一个

话不多说，上代码看吧

模板部分代码：

data部分代码：

focus_index: -1, phone_num: {0:'1', 1:'', 2:'', 3:'', 4:'', 5:'',6: '', 7:'', 8:'', 9:'', 10:''},

methods部分代码：

funInputPhoneNum(e) { var index = (e.target.id).replace('input-', ''); var value = e.detail.value; if (index != '10' && value != '') { this.focus_index = Number(index) + 1 } }, funDeletePhoneNum(e) { var index = (e.target.id).replace('input-', ''); if (this.phone_num[index] == '' && index > 1 ) { this.focus_index = Number(index) - 1; } }, funFocusInput(e){ var index = (e.target.id).replace('input-', ''); if(this.phone_num[index] != ''){ this.phone_num[index] = ''; } },

实现原理：

@input事件监听输入框输入内容后，通过设置focus_index使得 input框聚焦到下一个input框；

@keyup.delete事件监听输入按键后，聚焦的上一个input框

@focus事件配合任意选择有内容的input框进行内容清空，以便输入新的内容

【本文地址】

公司简介

联系我们